import React, { useState, useEffect } from 'react'
import './buildingroom.scss'
import { Button, Modal, Form, Input, Upload, Select } from 'antd';
import { EyeOutlined } from '@ant-design/icons';
import img from '../../../../../src/static/images/Login1.png';
import http from '../../../../utils/http';
import store from '../../../../store/index'
function BuildingRoom() {
    const { Option } = Select;
    const [op, setOp] = useState([])
    // 楼数据
    let floorData = [
        // 楼层 地上 面积
        {
            id: 1, floor: "一楼", product: "2021m²",
            children: [
                { id: 1, roomName: 101, noodles: "321m²", building: "所属楼宇", floor: "所属楼层", renovation: "毛坯", money: "20元/平方/日", img: "不知道" },
                { id: 2, roomName: 102, noodles: "322m²", building: "所属楼宇", floor: "所属楼层", renovation: "毛坯", money: "20元/平方/日", img: "不知道" },
                { id: 3, roomName: 102, noodles: "323m²", building: "所属楼宇", floor: "所属楼层", renovation: "毛坯", money: "20元/平方/日", img: "不知道" },
                { id: 4, roomName: 103, noodles: "324m²", building: "所属楼宇", floor: "所属楼层", renovation: "毛坯", money: "20元/平方/日", img: "不知道" },
                { id: 5, roomName: 104, noodles: "324m²", building: "所属楼宇", floor: "所属楼层", renovation: "毛坯", money: "20元/平方/日", img: "不知道" }
            ]
        },
        {
            id: 2, floor: "二楼", product: "2022m²",
            children: [
                { id: 1, roomName: 101, noodles: "321m²", building: "所属楼宇", floor: "所属楼层", renovation: "毛坯", money: "20元/平方/日", img: "不知道" },
                { id: 2, roomName: 102, noodles: "322m²", building: "所属楼宇", floor: "所属楼层", renovation: "毛坯", money: "20元/平方/日", img: "不知道" },
                { id: 3, roomName: 102, noodles: "323m²", building: "所属楼宇", floor: "所属楼层", renovation: "毛坯", money: "20元/平方/日", img: "不知道" },
            ]
        },
        {
            id: 3, floor: "三楼", product: "2023m²",
            children: [
                { id: 1, roomName: 101, noodles: "321m²", building: "所属楼宇", floor: "所属楼层", renovation: "毛坯", money: "20元/平方/日", img: "不知道" },
                { id: 2, roomName: 102, noodles: "322m²", building: "所属楼宇", floor: "所属楼层", renovation: "毛坯", money: "20元/平方/日", img: "不知道" },
                { id: 3, roomName: 102, noodles: "323m²", building: "所属楼宇", floor: "所属楼层", renovation: "毛坯", money: "20元/平方/日", img: "不知道" },
                { id: 4, roomName: 103, noodles: "324m²", building: "所属楼宇", floor: "所属楼层", renovation: "毛坯", money: "20元/平方/日", img: "不知道" },
            ]
        },
        {
            id: 4, floor: "四楼", product: "2024m²",
            children: [
                { id: 1, roomName: 101, noodles: "321m²", building: "所属楼宇", floor: "所属楼层", renovation: "毛坯", money: "20元/平方/日", img: "不知道" },
                { id: 2, roomName: 102, noodles: "322m²", building: "所属楼宇", floor: "所属楼层", renovation: "毛坯", money: "20元/平方/日", img: "不知道" },
                { id: 3, roomName: 102, noodles: "323m²", building: "所属楼宇", floor: "所属楼层", renovation: "毛坯", money: "20元/平方/日", img: "不知道" },
                { id: 4, roomName: 103, noodles: "324m²", building: "所属楼宇", floor: "所属楼层", renovation: "毛坯", money: "20元/平方/日", img: "不知道" },
                { id: 5, roomName: 104, noodles: "324m²", building: "所属楼宇", floor: "所属楼层", renovation: "毛坯", money: "20元/平方/日", img: "不知道" }
            ]
        }
    ]
    const [roomData, setRoomData] = useState([])
    const getRoom = () => {
        http({
            url: '/tenement/findSpace_Room',
            method: "post",
            params: {
                tenId: store.zhangxi.buildingDetails.tenId
            }
        }).then((res) => {
            if (res.code === 200) {
                let arr = res.data
                let arr2 = []
                function find(roomTennum, arr2) {
                    for (let i = 0; i < arr2.length; i++) {
                        if (arr2[i].roomTennum == roomTennum) {
                            return i
                        }
                    }
                    return -1
                }

                for (let i = 0; i < arr.length; i++) {
                    let n = find(arr[i].roomTennum, arr2)
                    if (n != -1) {
                        arr2[n].children.push({
                            c_id: i + 1,
                            // 装修情况
                            roomSituation: arr[i].roomSituation,
                            // 房间号
                            roomNo: arr[i].roomNo,
                            // 房间面积
                            roomArea: arr[i].roomArea,
                            // 房间价格
                            roomMoney: arr[i].roomMoney
                        })
                    } else {
                        arr2.push({
                            // 楼层
                            roomTennum: arr[i].roomTennum,
                            id: i + 1,
                            roomId: arr[i].roomId,
                            children: [
                                {
                                    c_id: i + 1,
                                    // 装修情况
                                    roomSituation: arr[i].roomSituation,
                                    // 房间号
                                    roomNo: arr[i].roomNo,
                                    // 房间面积
                                    roomArea: arr[i].roomArea,
                                    // 房间价格
                                    roomMoney: arr[i].roomMoney
                                }
                            ]

                        })
                    }
                }
                setRoomData(arr2)
                console.log(res.data, 'data');
                console.log(arr2, 'room');
            }

        })
    }
    useEffect(() => {
        getRoom()
    }, [])
    // 表单
    const [form] = Form.useForm();
    // 点击打开图片
    const [isHouseType, setIsHouseType] = useState(false);
    const HouseType = () => {
        setIsHouseType(true);
    };

    const HouseTypeOk = () => {
        setIsHouseType(false);
    };

    const HouseTypeCancel = () => {
        setIsHouseType(false);
    };

    // 添加房间
    const [isAddRoom, setIsAddRoom] = useState(false)
    const AddRoom = (i, index) => {
        console.log(index);
        if (index === 5) {
            alert('当前房间已满')
        } else {
            http({
                url: '/tenement/insertRoomInterface',
                method: "post",
                params: {
                    tenId: i
                }
            }).then((res) => {
                setOp(res.data)
            })
        }

        setIsAddRoom(true);
    };

    // 清空 input
    const emptyInput = () => {
        form.setFieldsValue({ roomgName: "", productName: "", buildingName: "", floorName: "", renovationName: "", moneyName: "" })
    }
    const addRoomOk = () => {
        const v = form.getFieldsValue(true)
        console.log('ok', v);
        emptyInput()
        setIsAddRoom(false);
        http({
            url: '/tenement/insertRoom',
            method: "post",
            params: {
                // 房间名称
                roomNo: v.roomgName,
                // 房间面积
                roomArea: v.productName,
                // 所属楼宇
                tenId: v.buildingName,
                // 楼层
                roomTennum: v.floorName,
                // 装修情况
                roomSituation: v.renovationName,
                // 出租单价
                roomMoney: v.moneyName,
            }
        }).then((res) => {
            console.log(res);
            getRoom()

        })
    };

    const addRoomCancel = () => {
        setIsAddRoom(false);
        emptyInput()
    };

    // 上传图片
    const normFile = (e) => {
        console.log('Upload event:', e);
        if (Array.isArray(e)) {
            return e;
        }

        return e && e.fileList;
    };
    const [fileList, setFileList] = useState([
        {
            uid: '-1',
            name: 'image.png',
            status: 'done',
            url: '',
        },
    ]);

    const onChange = ({ fileList: newFileList }) => {
        setFileList(newFileList);
    };

    const onPreview = async file => {
        let src = file.url;
        if (!src) {
            src = await new Promise(resolve => {
                const reader = new FileReader();
                reader.readAsDataURL(file.originFileObj);
                reader.onload = () => resolve(reader.result);
            });
        }
        const image = new Image();
        image.src = src;
        const imgWindow = window.open(src);
        imgWindow.document.write(image.outerHTML);
    };



    return (
        <div className='buildingRoom_box'>
            {/* 一楼 */}
            {/* 灰色 */}
            {
                roomData.map((item, index) => {
                    return (
                        <div className='buildingRoom_groundFloor' key={item.id}>
                            <div className='buildingRoom_groundFloor_hui' >
                                <h2>{item.roomTennum}</h2>
                                <p>地上</p>
                                <Button type="dashed" onClick={() => {
                                    AddRoom(item.roomId, item.children.length)
                                }} >
                                    添加房间 +
                                </Button>
                            </div>
                            {item.children.map((item2, index2) => {
                                return (
                                    <div className='buildingRoom_groundFloor_content' key={item2.c_id}>
                                        {/* 缩略图 */}
                                        <div className='buildingRoom_groundFloor_content_d1'>
                                            <p onClick={HouseType}>户型图 <EyeOutlined /></p>
                                        </div>
                                        <h2 className='buildingRoom_groundFloor_content_h2'>
                                            房间号：{item2.roomNo}
                                        </h2>
                                        {/* 装修 面积 */}
                                        <div className='buildingRoom_groundFloor_content_d2'>
                                            <div>
                                                装修情况：{item2.roomSituation}
                                            </div>
                                            <div>
                                                房间面积：{item2.roomArea}
                                            </div>
                                        </div>
                                        {/* 出租单价 */}
                                        <div>
                                            出租单价：{item2.roomMoney}
                                        </div>
                                    </div>
                                )
                            })}
                        </div>


                    )
                })
            }


            {/* 图片 */}
            <Modal title="户型图" visible={isHouseType} onOk={HouseTypeOk} onCancel={HouseTypeCancel} width={770}
                okText="确定" cancelText="取消"
            >
                <img className='buildingRoom_img' src={img} ></img>
            </Modal>


            {/* 添加房间 */}
            <Modal title="添加房间" visible={isAddRoom} onOk={addRoomOk} onCancel={addRoomCancel} width={650}
                okText="提交" cancelText="取消"
            >
                <Form form={form} initialValues={{ remember: true }} >
                    {/* 名称面积 */}
                    <div style={{ display: "flex" }}>
                        <Form.Item
                            label="房间名称"
                            name="roomgName"
                            rules={[{ required: true, message: '请输入房间名称!' }]}
                            style={{ marginRight: "10px", flex: 1 }}
                        >
                            <Input placeholder="请输入房间名称" />
                        </Form.Item>

                        <Form.Item
                            label="房间面积"
                            name="productName"
                            style={{ flex: 1 }}
                            rules={[{ required: true, message: '请输入房间面积!' }]}
                        >
                            <Input placeholder="请输入房间面积" />
                        </Form.Item>
                    </div>

                    {/* 楼宇楼层 */}
                    <div style={{ display: "flex" }}>
                        <Form.Item
                            label="所属楼宇"
                            name="buildingName"
                            rules={[{ required: true, message: '请输入所属楼宇!' }]}
                            style={{ marginRight: "10px", flex: 1 }}
                        >
                            <Select>
                                {/* <Option value="lucy">{itme.tenSerialint}</Option> */}
                                {op.map((item) => {
                                    return (
                                        <Option value={item.tenId} key={item.tenId}>{item.tenSerialint}</Option>
                                    )
                                })}
                            </Select>
                        </Form.Item>

                        <Form.Item
                            label="所属楼层"
                            name="floorName"
                            style={{ flex: 1 }}
                            rules={[{ required: true, message: '请输入所属楼层!' }]}
                        >
                            <Input placeholder="请输入所属楼层" />
                        </Form.Item>
                    </div>

                    {/* 装修单价 */}
                    <div style={{ display: "flex" }}>
                        <Form.Item
                            label="装修情况"
                            name="renovationName"
                            rules={[{ required: true, message: '请输入装修情况!' }]}
                            style={{ marginRight: "10px", flex: 1 }}
                        >
                            <Input placeholder="请输入装修情况" />
                        </Form.Item>

                        <Form.Item
                            label="出租单价"
                            name="moneyName"
                            style={{ flex: 1 }}
                            rules={[{ required: true, message: '请输入出租单价!' }]}
                        >
                            <Input placeholder="请输入出租单价" />
                        </Form.Item>
                    </div>

                    {/* 上传图片 */}
                    <div>
                        <Form.Item label="楼宇图片"
                            name="buildingImage"
                            // labelCol={{ span: 6 }}
                            rules={[{ required: true }]}
                            style={{
                                flex: '1',
                            }}>
                            <Form.Item valuePropName="fileList" getValueFromEvent={normFile} noStyle>
                                <Upload
                                    action=""
                                    listType="picture-card"
                                    fileList={fileList}
                                    onChange={onChange}
                                    onPreview={onPreview}
                                    maxCount={1}
                                >
                                    {fileList.length < 5 && '+ 选择图片'}
                                </Upload>

                            </Form.Item>
                        </Form.Item>
                    </div>
                </Form>
            </Modal>
        </div>
    )
}

export default BuildingRoom